<template>
  <div
    class="modal-content"
    id="login-modal"
    @click="hide()"
    :style="{
      zIndex: 999999,
      transform: `scale(${visible ? 1 : 0})`,
      backgroundColor: `rgba(61,61,61,${visible ? '.6' : '0'})`,
    }"
  >
    <view class="modal-body" @click.stop v-if="visible">
      <view class="content">{{ title }}</view>
      <view class="ft">
        <view
          class="btn left"
          @click="handleLeftBtnClick"
          :style="{
            color: themeColor,
          }"
        >
          取消
        </view>
        <button
          :loading="loading"
          open-type="getPhoneNumber"
          @getphonenumber="handleRightBtnClick"
          class="btn right"
          @click="handleRightBtnClick"
          :style="{
            backgroundColor: themeColor,
          }"
        >
          {{ btnText }}{{ loading ? "中" : "" }}
        </button>
      </view>
    </view>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { updatePubUserPhone } from "@/service/api/sp-common/user";

export default {
  name: "modal-login",
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
    ...mapState("sp-common/auth", ["isAnonUser", "updatePubUserParams"]),
    ...mapState("sp-common/user", ["userInfo"]),
    title({ isAnonUser, userInfo }) {
      return isAnonUser
        ? "您还未登录，请先进行授权登录"
        : !userInfo?.phone
          ? "您还未绑定手机号，请先进行授权绑定"
          : "";
    },
    btnText({ isAnonUser, userInfo }) {
      return isAnonUser ? "微信登录" : !userInfo?.phone ? "绑定" : "";
    },
  },
  props: {
    // 是否显隐
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    open() {
      this.$emit("update:visible", true);
    },
    hide() {
      this.$emit("update:visible", false);
    },
    handleLeftBtnClick() {
      this.hide();
      this.$emit("cancel-bind-phone");
    },
    async handleRightBtnClick(event) {
      this.loading = true;
      if (event?.detail?.errMsg) {
        if (event?.detail?.errMsg === "getPhoneNumber:ok") {
          const { encryptedData, iv } = event.detail;
          await this.$store.dispatch("sp-common/auth/setPubUserParams", {
            encryptedData,
            ivStr: iv,
          });
          if (this.isAnonUser) {
            await this.$store
              .dispatch("sp-common/auth/anonUserLogin")
              .then(() => {
                this.hide();
                this.loading = false;
              });
          }
          if (!this.isAnonUser && !this.userInfo?.phone) {
            const res = await updatePubUserPhone({
              ...this.updatePubUserParams,
            });
            if (res.code === 0) {
              this.hide();
              this.loading = false;
              await this.$store.dispatch(
                "sp-common/user/getUserBaseInfoAction"
              );
            }
          }
        } else {
          this.loading = false;
          this.hide();
          this.$emit("cancel-bind-phone");
        }
      }
      // this.$emit("update:visible", false);
      // this.$emit("cancel");
      // this.hide();
    },
  },
};
</script>
<style lang="scss" scoped>
.modal-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;

  .modal-body {
    width: 600rpx;
    background-color: #fff;
    border-radius: 15rpx;

    .hd {
      text-align: center;
      padding-top: 10rpx;
    }
    .content {
      width: 100%;
      padding: 90rpx 0;
      border-radius: 15rpx 15rpx 0 0;
      font-size: 29rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ft {
      display: flex;
      border-top: 1rpx solid #e3e3e3;
      border-radius: 0 0 15rpx 15rpx;
      overflow: hidden;

      .btn {
        flex: 1;
        height: 75rpx;
        box-sizing: border-box;
        font-size: 29rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        &:active {
          opacity: 0.5;
        }
      }
      .right {
        background-color: white;
        border: none;
      }
    }
  }
}

button::after {
  border: none;
}
</style>
